<template>
  <div style="padding-top:5px;">
  <div :style="contentDiv.parent">
    <div :style="contentDiv.child_frist">
        <div >
          <el-form :inline="true" :model="searchContent" class="demo-form-inline">

            <el-form-item label="内容" style="margin-bottom:10px;">
                <el-input v-model="searchContent.content" placeholder="输入要添加的内容"  size="small"></el-input>
            </el-form-item>
            <el-form-item style="margin-bottom:10px;">
              <el-button type="primary" @click="handleAdd" size="small">添加</el-button>
            </el-form-item>
          </el-form>
        </div>
       <el-table
        :data="searchTableData"
        border
        stripe
        size="mini"
        style="width: 100%">
        <el-table-column      
          label="序号"
          type="index"
          >
        </el-table-column>
        <el-table-column      
          prop="content"
          label="内容"
          >
          <!-- <template slot-scope="scope">
            <span  v-html="showDateLeft(scope.row.content)"></span>
          </template> -->
        </el-table-column>
        <el-table-column label="操作" :width="tableStyle.operator.width">
        <template slot-scope="scope">
          <el-button slot="reference"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)" >删除</el-button>
        </template>
      </el-table-column>
      </el-table>
    </div>
    <div :style="contentDiv.child_other">
       <div >
          <el-form :inline="true" :model="searchContent" class="demo-form-inline">
            <el-form-item label=">=" style="margin-bottom:10px;">
                <el-input v-model="searchContent.errorStart" placeholder="错误次数最小值"  size="small"></el-input>
            </el-form-item>
            <el-form-item label="<=" style="margin-bottom:10px;">
                <el-input v-model="searchContent.errorEnd" placeholder="错误次数最大值"  size="small"></el-input>
            </el-form-item>
            <el-form-item style="margin-bottom:10px;">
                <el-button type="primary" @click="submitQuery" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table
      :data="tableData"
      border
      stripe
      size="mini"
      :style="tableStyle.tableHead">
      <el-table-column
        label="序号"
          type="index"
        >     
      </el-table-column>   
      <el-table-column
        prop="no"
        label="no"
        :width="tableStyle.no.width">
      </el-table-column>
      <el-table-column
        prop="content"
        label="内容"
        >
        <template slot-scope="scope">
            <span  v-html="showDate(scope.row.content)"></span>
          </template>
      </el-table-column>
      <el-table-column
        prop="createdDate"
        label="录入时间"
        >
      </el-table-column>
      <el-table-column
        prop="errorNum"
        label="错误次数"
        >
      </el-table-column> 
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizeArr"
      :page-size="pageSize"
      :layout="layout"
      :pager-count="pagerCount"
      :total="totalRecord">
    </el-pagination>
    <div v-if="totalVisible" style="font-size:14px;padding-top:10px">共{{totalRecord}} 条</div>
    </div>
  </div>
    

  </div>
</template>

<script>
import { mapState } from "vuex";
import API from '@/api/blogs.js'
  export default {
    name: 'BatchQueryNoContentHanzi',
    data() {
      return {
        // 分页组件配置
        currentPage: 1,
        totalRecord:0,
        pageSize:10,
        pageSizeArr:[10,15,20, 30, 50],
        layout:"total, sizes, prev, pager, next, jumper",
        pagerCount:7,
        totalVisible:false,
        // 分页查询
        fcapNoContent: {
          pageNo:1,
          pageSize:10,
          errorStart: 3,
          errorEnd: 3,
          list: [
          ]
        },
        // 搜索框配置
        searchDiv:{
          styles:{
              width: '100px'
          }
        },
        arr2:[],
        searchContent:{
          content:""
        },
        formLabelWidth: 'auto',
        formWidth:'100%', 
        searchTableData:[
            
        ],
        // 表格数据
        tableData: [],
        tableStyle:{
          no:{
            width:'100px'
          },
          operator:{
            width:'80px'
          },
          tableHead:{
            'margin': '0 auto',
            'width':'100%'
          }
        },
        contentDiv: {
          parent:{
            clear:'both',
            width:'100%'
            
          },
          child_frist:{
            float:'left',
            width:'30%',
          },
          child_other:{
            float:'left',
            width:'55%',
            marginLeft:'10px'
          }
        }
      }
    },
    created(){
      //this.isMobile();
      //this.selectByMultiContentPage();
    },
    computed: {//加载数据过程loading
	    ...mapState(["isLoading"])
	  },
    methods: {
       handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.fcapNoContent.pageSize  = val;
        this.fcapNoContent.pageNo  = 1;
        this.selectByMultiContentHanziPage();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.fcapNoContent.pageNo  = val;
        this.selectByMultiContentHanziPage();
      },
      submitQuery(){
        if(this.fcapNoContent.list == null || this.fcapNoContent.list.length == 0){
          return
        }
        this.fcapNoContent.errorStart = this.searchContent.errorStart
        this.fcapNoContent.errorEnd = this.searchContent.errorEnd
        console.log(this.fcapNoContent)
        this.selectByMultiContentHanziPage()
      },

      // 列表查询
      selectByMultiContentHanziPage:function(){
        console.log("selectByMultiContentHanziPage...")
        this.arr2 = [];
        API.selectByMultiContentHanziPage(this.fcapNoContent).then(res => {
          //请求成功
          if(res.code == '00000000'){
            console.log(res.data)
            this.tableData = res.data.list;
            if(this.tableData.length == 0){
              this.currentPage = 1;
            }else{
              this.currentPage = res.data.pageNo;  
            }  
            this.totalRecord =  res.data.count;
            this.pageSize = res.data.pageSize;
            let a= [];
            Object.assign(a, this.searchTableData);
            this.searchTableData = [];
            this.searchTableData = a;
          }
        }).catch(err => {
            //请求失败
            console.log("error:"+ err)
        })
      },
      // 数据标红
      showDate(val) {
        val = val + "";
        let arr1 = val.split(".");
        var arr3 = [];
        var _self= this;
         this.fcapNoContent.list.forEach(e=>{
          e.set.forEach(e1=>{
            if(_self.arr2.indexOf(e1) == -1){
              _self.arr2.push(e1)
            }
          })
        })
        arr3=arr1.filter(item=>{
              return _self.arr2.includes(item)
          })
        // console.log("arr2:")
        // console.log(this.arr2)
        // console.log("arr3:")
        // console.log(arr3)
        if(arr3.length> 0){
          var resultVal = "";  
          for(var j = 0; j< arr3.length; j++){
            for(var i = 0; i< arr1.length; i++){
              if(arr1[i] == arr3[j]){
                arr1[i] = '<font color="red">' + arr3[j] + "</font>"
              }
            }
          }     
          
          return arr1.join(".");
        }
        return val;
      
      },
      // showDateLeft(val){
      //   val = val + "";
      //   let arr1 = val.split(".");
      //   var arr3 = [];
      //   var _self= this;

      //   console.log("showDateLeft:"+ JSON.stringify(this.arr2))


      //    var _self= this;
      //   this.fcapNoContent.list.forEach(e=>{
      //     e.set.forEach(e1=>{
      //       if(_self.arr2.indexOf(e1) == -1){
      //         _self.arr2.push(e1)
      //       }
      //     })
      //   })
        
      //   arr3=arr1.filter(item=>{
      //         return _self.arr2.includes(item)
      //     })
      //   // console.log("arr2:")
      //   // console.log(this.arr2)
      //   // console.log("arr3:")
      //   // console.log(arr3)
      //   if(arr3.length> 0){
      //     var resultVal = "";  
      //     for(var j = 0; j< arr3.length; j++){
      //       for(var i = 0; i< arr1.length; i++){
      //         if(arr1[i] == arr3[j]){
      //           arr1[i] = '<font color="red">' + arr3[j] + "</font>"
      //         }
      //       }
      //     }     
          
      //     return arr1.join(".");
      //   }
      //   return val;
      // },
      handleAdd() {
        if(this.searchContent.content == null ||this.searchContent.content.replace(" ","") == ''){
          console.log("返回");
          return;
        }
        let a = {}
        this.searchContent.content = this.searchContent.content.replace(" ","")
          .replace(":",".").replace(",",".").replace("，",".").replace("..",".").replace("：",".")
        Object.assign(a, this.searchContent);
        //console.log(a)

        this.searchTableData.push(a)
        this.fcapNoContent.list.push({set:a.content.split('.')})
        this.searchContent.content = ''
        //console.log(this.searchTableData)
        //console.log(this.fcapNoContent)

      },
      handleDelete(index, row) {
        console.log("delete:", index, row);
        this.searchTableData.splice(index,1)
        this.fcapNoContent.list.splice(index,1);
      },
     
      handlePreview(file) {
        console.log(file);
      }
    } 
  }
</script>
<style scoped>

.el-form-item:first{
  margin-left:0px;
}

input{
  width:100px !important;
}
</style>